Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Date Picker Input Mask
We can enforce the date picker’s date format with an input mask.
To add it, we add the mask prop:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-badge color="teal">
{{ date }}
</q-badge>
<div>
<q-date v-model="date" mask="YYYY-MM-DD"> </q-date>
</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
date: undefined
}
});
</script>
</body>
</html>
We can add a mark with escaped characters by escaping them with the [ and ] characters:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-badge color="teal">
{{ date }}
</q-badge>
<div>
<q-date v-model="date" mask="[Month ( ]MMMM ) Do[, Year ( ]YYYY )">
</q-date>
</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
date: undefined
}
});
</script>
</body>
</html>
Date Picker Locale
We can set the date picker locale with the locale prop:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-badge color="teal">
{{ date }}
</q-badge>
<div>
<q-date v-model="date" :locale="locale"> </q-date>
</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
date: undefined,
locale: {
days: "Domingo_Lunes_Martes_Miércoles_Jueves_Viernes_Sábado".split(
"_"
),
daysShort: "Dom_Lun_Mar_Mié_Jue_Vie_Sáb".split("_"),
months: "Enero_Febrero_Marzo_Abril_Mayo_Junio_Julio_Agosto_Septiembre_Octubre_Noviembre_Diciembre".split(
"_"
),
monthsShort: "Ene_Feb_Mar_Abr_May_Jun_Jul_Ago_Sep_Oct_Nov_Dic".split(
"_"
),
firstDayOfWeek: 1
}
}
});
</script>
</body>
</html>
We can set the locale prop to change the text of the days and months.
days sets the days text. daysShort sets the day abbreviations.
months sets the months text. monthsShort sets the month abbreviations.
firstDayOfWeek sets the first day of the week.
Date Picker Color
We can set the color of the top bar with the color prop:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-date color="orange" v-model="date"> </q-date>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
date: undefined
}
});
</script>
</body>
</html>
Conclusion
We can set various options for the date picker Quasar’s q-date component.
